<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        /* 通过检查可以发现body与html有间隔，可见margin仍作用于父元素body，overflow并没有形成BFC 
        
        解决办法：给html设置overflow
        */
        html{
            overflow: hidden;
        }
        body{
          overflow: scroll;
          /* display: inline-block; */
          /* background-color: rgb(34, 38, 38); */
        }
        .box1{
            background-color: aqua;
            height: 100px;
            width: 100px;
            margin-top: 50px;
        }

    </style>
</head>
<body>
    <!-- 
        解决margin-top作用与父元素
        以及一种特殊情况给body设置overflow无法触发BFC

        When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'.

        简单翻译一下就是，当根元素位html且第一个元素为body是，且根元
        素设置为visible时body的overflow属性会设置到视口上，并不对自
        己起作用
     -->

     <div class="box1"></div>
</body>
</html>